<template>
  <div>
    <div class="flex justify-between border-b pb-4 mb-4">
      <div class="flex">
        <span class="mr-3">方案选择</span>
        <el-select
          v-model="programme"
          multiple
          placeholder="请选择"
          style="width: 300px"
          @change="proChange"
          filterable
        >
          <el-option
            v-for="item in programmeList"
            :key="item.id"
            :label="item.programName"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" class="ml-4" @click="getInfoData" :loading="loading"
          >确定</el-button
        >
        <el-tooltip class="ml-4" placement="right-end" effect="light">
          <div class="flex items-center ml-4 text-[#8f918f]">
            方案要求<el-icon><Warning /></el-icon>
          </div>
          <template #content>
            <div v-for="(item, index) in SchemeRequirements" :key="index" class="w-[500px]">
              <div>{{ index + 1 }}.{{ item.programName }}</div>
              <div>
                <p>
                  <span v-if="item.attitude"
                    >属性：{{ getText(item.attitude, attitudeStatus) }}，</span
                  >
                  <span v-if="item.type">文章类型：{{ getText(item.type, typeStatus) }}，</span>
                  <span v-if="item.wtype">发表类型：{{ getText(item.wtype, wtypeStatus) }}，</span>
                  <span v-if="item.webName">用户平台：{{ item.webName }}</span>
                </p>
                <p>
                  <span v-if="item.ip">ip属地： {{ item.ip }}，</span>
                  <span v-if="item.keywords">关键词：{{ item.keywords }}，</span>
                  <span v-if="item.noKeywords">排除词：{{ item.noKeywords }}</span>
                </p>
                <p v-if="item.programRemark">方案描述: {{ item.programRemark }}</p>
              </div>
            </div>
          </template>
        </el-tooltip>
      </div>
      <el-button type="primary" color="#e65441" @click="sqztVisible = true">暂停</el-button>
    </div>
    <el-button type="primary" class="mb-3" @click="zdytsVisible = true">自定义推送</el-button>
    <template v-if="list.length > 0">
      <swiper
        :slides-per-view="2"
        :space-between="0"
        navigation
        no-swiping
        centeredSlides
        :modules="modules"
        class="swiper-no-swiping"
      >
        <swiper-slide v-for="(item, index) in list" :key="item.id">
          <InfoBox @push-fn="pushFn(index)" :info="item" :key="item.id" />
        </swiper-slide>
      </swiper>
    </template>

    <div v-else class="w-full flex justify-center">
      <el-empty style="background: #fff" description="暂无数据" />
    </div>
    <el-dialog v-model="zdytsVisible" :show-close="false" width="500">
      <div>
        <div class="title">自定义推送</div>
        <div class="flex mt-3 items-center">
          <span class="mr-3 whitespace-nowrap">原文地址</span>
          <el-input v-model="value" placeholder="" type="textarea" clearable></el-input>
        </div>
        <div class="px-28 flex justify-between mt-8">
          <el-button type="primary">推送</el-button>
          <el-button type="warning" @click="zdytsVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="sqztVisible" :show-close="false" width="500">
      <div>
        <div class="title">申请暂停</div>
        <div class="mt-3">
          <div class="my-3 whitespace-nowrap">申请理由</div>
          <el-input
            v-model="remark"
            placeholder="请输入申请理由"
            type="textarea"
            clearable
          ></el-input>
        </div>
        <div class="px-28 flex justify-between mt-8">
          <el-button type="primary" @click="ztSubmit">确定</el-button>
          <el-button type="warning" @click="sqztVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- <div
      v-if="ztShow"
      class="absolute bg-[rgba(0,0,0,0.4)] z-500 left-0 top-0 w-full h-full mt-[-100px] flex justify-center items-center"
    ></div> -->
    <el-dialog
      custom-class="bgshow"
      class="bgshow"
      v-model="ztShow"
      :show-close="false"
      width="500"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <div class="text-[20px] bg-white flex-col flex items-center justify-center text-[red]">
        <div>已暂停</div>
        <div class="mt-4 mb-6 text-[50px]">{{ formattedTime }}</div>
        <el-button type="primary" @click="stopTimer">结束</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Autoplay } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/autoplay'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import InfoBox from './components/InfoBox.vue'
import { getData, getProgramAll, getStatus, startPost, stopPost } from '@/api/home'
import { attitudeStatus, typeStatus, wtypeStatus } from '@/stores/commonData'
const zdytsVisible = ref(false)
const sqztVisible = ref(false)
const loading = ref(false)
const ztShow = ref(false)
const value = ref('')
const programme = ref([])
const remark = ref('')
const modules = ref([Navigation, Autoplay])
const programmeList = ref<any[]>([])
const SchemeRequirements = ref<any[]>([])
onMounted(async () => {
  const res1: any = await getStatus()
  if (res1.msg === 'stop') {
    ztShow.value = true
    startTimer()
  }
  const res: any = await getProgramAll({})
  programmeList.value = res.data
  getInfoData()
})
const list = ref<any[]>([])
const seconds = ref(0)
const formattedTime = computed(() => {
  const minutes = Math.floor(seconds.value / 60)
  const secs = seconds.value % 60
  const paddedMinutes = String(minutes).padStart(2, '0')
  const paddedSeconds = String(secs).padStart(2, '0')
  return `${paddedMinutes}:${paddedSeconds}`
})
let timer: any = null

const startTimer = () => {
  timer = setInterval(() => {
    seconds.value++
  }, 1000)
}

const stopTimer = async () => {
  await startPost()
  clearInterval(timer)
  ztShow.value = false
}
const pageSize = ref(3)
onBeforeUnmount(() => {
  stopTimer()
})
const getText = (text: string, Status: any) => {
  if (text) {
    return text
      .split(',')
      .map((j: any) => Status[j + ''])
      .join('、')
  } else {
    return ''
  }
}
const getInfoData = async () => {
  try {
    loading.value = true
    const res: any = await getData({
      programIdList: programme.value,
      page: 0,
      pageSize: pageSize.value
    })
    list.value = list.value.concat(res.data)

    res.data.forEach((item: any) => {
      if (item.imgs && item.imgs.length > 6) {
        item.showImgs = item.imgs.slice(0, 7)
      } else {
        item.showImgs = item.imgs
      }
    })
    loading.value = false
    // console.log(res)
  } catch (error) {
    loading.value = false
  }
}
const proChange = () => {
  SchemeRequirements.value = []
  programme.value.forEach((item) => {
    let info = programmeList.value.filter((i) => i.id === item)[0]
    SchemeRequirements.value.push(info)
  })
  console.log(SchemeRequirements.value)
}
const timer1 = ref()
const pushFn = (index: number) => {
  list.value.splice(index, 1)
  pageSize.value = 1
  getInfoData()
  if (list.value.length <= 0) {
    timer1.value = setInterval(() => {
      getInfoData()
    }, 3000)
  }
}
const ztSubmit = async () => {
  await stopPost({ remark: remark.value })
  sqztVisible.value = false
  ztShow.value = true
  startTimer()
}
onBeforeUnmount(() => {
  clearInterval(timer1.value)
})
</script>

<style scoped lang="less">
.swiper-slide {
  transition: 300ms;
  transform: scale(0.6);
  opacity: 0.4;
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
  width: 1100px !important;
  margin-left: -150px;
  opacity: 1;
}
.swiper-slide-next {
  z-index: -99;
  // margin-right: -300px !important;
}
:deep(.el-dialog__header) {
  padding: 0 !important;
}
.title {
  padding-left: 12px;
  position: relative;
  font-size: 16px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 6px;
  &::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: 5px;
    height: 20px;
    background: #5087ec;
  }
}
.bgshow {
  background: none !important;
  box-shadow: none !important;
}
:deep(.bgshow) {
  background: red !important;
  box-shadow: none !important;
}
</style>
